<template>
  <div class="video-download">
    <div id="divPlugin" hidden></div>
    <el-card>
      <el-form :inline="true">
        <el-form-item label="开始时间">
          <el-date-picker
            v-model="startTime"
            type="datetime"
            placeholder="Select date and time"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
            v-model="endTime"
            type="datetime"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="Select date and time"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="searchVideo">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="序号" />
        <el-table-column prop="fileName" label="文件名" />
        <el-table-column prop="startTime" label="开始时间" />
        <el-table-column prop="endTime" label="结束时间" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button @click="onDownloadRecord(scope.$index)">下载</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { onMounted, onBeforeUnmount, ref, reactive } from "vue";

import hkVideoService from "../services/hkVideoService.js";

const config = reactive({
  ip: "172.16.0.241",
  port: 80,
  username: "admin",
  password: "Aa123456",
});
const startTime = ref("");
const endTime = ref("");
const tableData = ref("");

const searchVideo = () => {
  tableData.value = [];

  hkVideoService.recordSearch(0, startTime.value, endTime.value);

  setTimeout(() => {
    tableData.value = hkVideoService.searchResults.value;
  }, 200);
};

const onDownloadRecord = (index) => {
  hkVideoService.startDownloadRecord(index);
};

onMounted(async () => {
  await hkVideoService.initPlugin("divPlugin");

  setTimeout(async () => {
    await hkVideoService.login(config);
    await hkVideoService.getChannelList();
  }, 1000);
});

onBeforeUnmount(async () => {
  await hkVideoService.logout();
  await hkVideoService.destroyPlugin();
});
</script>

<style scoped></style>
